<div class="dataTable equipment-alarm">
  <div class="table-buttons">
    <div class="table-buttons-left">
      <!-- <div class="operate" (click)="askAlarm()"  *ngIf="accessButton?.Ack"><i class="iconfontmore icon-queren"></i>{{'EquipmentManagement.equipmentAlarm.Ack' | translate}}</div>
      <div class="operate" (click)="falseAlarm('Clear')" *ngIf="accessButton?.Clear"><i class="iconfont icon-fork"></i>{{'EquipmentManagement.equipmentAlarm.Clear' | translate}}</div>
      <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div> -->

      <button class="op-btn" nz-button nzType="primary" (click)="askAlarm()" *ngIf="accessButton?.Ack"><i nz-icon nzType="check" nzTheme="outline"></i>{{'EquipmentManagement.equipmentAlarm.Ack' | translate}}</button>
      <button class="op-btn" nz-button nzType="danger" (click)="falseAlarm('Clear')" *ngIf="accessButton?.Clear"><i nz-icon nzType="close" nzTheme="outline"></i>{{'EquipmentManagement.equipmentAlarm.Clear' | translate}}</button>
      <button nz-button nzType="primary" (click)="refresh()" nzShape="circle"><i nz-icon nzType="reload" nzTheme="outline"></i></button>
    </div>
    <div class="table-buttons-right">
      <div class="equipmet_toolbar">
        <!-- <i class="iconfont icon-youjian"></i> -->
        <itmp-toolbar [toolbarList]="toolbarList" [eventType]="'alarm-position'" [selectData]="selectAlarm" [accessButton]='accessButton'
          [searchData]="searchData"  exportName="equipmentAlarm"></itmp-toolbar>
      </div>
    </div>
  </div>
  <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzPageSize]="pagination.pageSize" [nzData]="listOfData" style="padding:0.1rem">
    <thead>
      <tr class="dataTitle">
        <th *ngFor="let item of renderHeader" class="listTitle">
          <div>{{"EquipmentManagement.equipmentAlarm." + item.name | translate}}</div>
          <!-- 选择框 -->
          <div class="switch no-print" *ngIf="item.name==='Alarm_Source'" style="min-width: 1.3rem">
            <nz-select style="width: 100%;" [(ngModel)]="searchData[item.value]" [nzPlaceHolder]="'Share.All' | translate"
              nzShowSearch nzAllowClear (ngModelChange)="onSearch(item.value)">
              <nz-option *ngFor="let one of selectionList[item.name]" [nzLabel]="'EquipmentManagement.equipmentAlarm.'+one|translate" [nzValue]="one"></nz-option>
            </nz-select>
          </div>
          <!-- 输入框 -->
          <div class="switch no-print"
            *ngIf="item.name==='Alarm_ID' || item.name==='Equipment_ID' || item.name==='Description' || item.name==='Zone_ID'">
            <input nz-input [placeholder]="'' | translate" style="width:100%" [(ngModel)]="searchData[item.value]"
              (keyup)="onSearch(item.value)" #searchInput />
          </div>
          <!-- 日期选择 -->
          <div class="switch no-print" *ngIf="item.name==='Detection_Date' || item.name==='Ack_Date'">
            <!-- <nz-date-picker [(ngModel)]="searchData[item.value]" (ngModelChange)="onSearch(item.value)"></nz-date-picker> -->
            <nz-range-picker [nzPlaceHolder]="['EquipmentManagement.EquipmentManagement.Start Time'|translate, 'EquipmentManagement.EquipmentManagement.End Time'|translate]"
              [(ngModel)]="dateArr[item.value]" [nzDisabledDate]="disabledDate" (ngModelChange)="onDateOk($event,item.value)"></nz-range-picker>
          </div>
          <!-- 占用位置 -->
          <div class="switch no-print" *ngIf="item.name==='Photograph'">
            <input nz-input style="opacity: 0" />
          </div>
        </th>
      </tr>
    </thead>
    <tbody class="dataList">
      <tr *ngFor="let data of basicTable.data;index as i" (click)="clickTR(i)" [class.active]="data.active">
        <td>{{data.alarmId}}</td>
        <td>{{data.deviceID}}</td>
        <td>{{'EquipmentManagement.equipmentAlarm.'+data.alarmSource|translate}}</td>
        <td>{{data.detectionTime}}</td>
        <td>{{data.ackTime}}</td>
        <td>{{'DataManagement.TechnicalAlarmReport.'+data.description | translate}}</td>
        <td>{{data.zoneID}}</td>
<!--        <td>{{data.status}}</td>-->
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- <td>Showing 1 to 10 of 1083 entries</td> -->
        <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
          <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
            [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
            (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
        </td>
      </tr>
    </tfoot>
  </nz-table>
</div>
<nz-modal [(nzVisible)]="isForceVisible"
 nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}" (nzOnCancel)="FourchHandleCancel()" (nzOnOk)="ForceHandleOk()">
    <div>
      {{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
    </div>
</nz-modal>

<nz-modal [(nzVisible)]="isForceClearVisible" nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}" (nzOnCancel)="FourchHandleCancel()" (nzOnOk)="ForceClearHandleOk()">
  <div>
    {{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
  </div>
</nz-modal>
